<template>
  <div class="internal">
    <navbar :text="$route.params.text"></navbar>
    <div class="article_list">
      <div class="article" v-for="item in list" :key="item._id" @click="healthAciton(item.goodsID._id)">
        <img :src="item.goodsID.img" alt="" />
        <h1>{{ item.goodsID.title }}</h1>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "../../../components/navbar.vue";
import { mapState } from "vuex";
export default {
  components: {
    navbar,
  },
  computed: {
    ...mapState("collectList", {
      list: "collect",
    }),
  },
  methods: {
    healthAciton(id) {
      this.$router.push({
        name: "newsinfo",
        params: { text: "文案详情", id },
      });
    },
  },
  created() {
    this.$store.dispatch("collectList/collectData");
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}

.article_list {
  position: relative;
  z-index: 1;
  top: 46px;
  left: 0;
  height: calc(100% - vw(46));
  background-color: #fff;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .article {
    width: 100%;
    display: flex;
    padding: vw(30) vw(20) vw(0) vw(15);
    box-sizing: border-box;

    &:last-child {
      padding-bottom: vw(30);
    }

    img {
      width: vw(120);
      height: vw(68);
      margin-right: vw(10);
    }

    h1 {
      padding-top: vw(3);
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(14);
      color: #333;
    }
  }
}
</style>
